<template>
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <b v-if="sidebarshow" @click="sidebarbtnhide()">&nbsp;&nbsp;<i class="el-icon-menu"></i></b>
                <b v-if="!sidebarshow" @click="sidebarbtnshow()">&nbsp;&nbsp;<i class="el-icon-menu"></i>
            </b> &nbsp;&nbsp;pos监控系统 &nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="user-info">
                <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{username}}
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!--<v-head></v-head>-->

        <v-sidebar v-bind:sidebarwidth='sidebarwidth' v-bind:sidebarshow = "sidebarshow" v-bind:sidebarhide = "sidebarhide"></v-sidebar>
        <div v-show="sidebarshow" class="sidebarbtn sidebarbtnhide" @click="sidebarbtnhide()"><i class="el-icon-arrow-right"></i>123</div>
        <div class="content" v-bind:style="styleObject">
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>
    </div>
</template>

<script>

    import vHead from './glHeader.vue';
    import vSidebar from './glMenus.vue';
    const insurance = require( '../../api/insurance.js');        //  接口js引用
    export default {
        components:{
            vHead, vSidebar
        },
        data: function(){
            const self = this;
            return {
                name: 'admin',
                username:'',
                sidebarshow:true,
                sidebarhide:false,
                sidebarwidth:{
                    width:'183px'
                },
                styleObject: {
                    left:'184px',
                }
            }
        },
        methods: {
            //  隐藏
            sidebarbtnhide: function () {
                this.sidebarshow = false;
                this.sidebarhide = true;
                this.sidebarwidth.width = '0px';
                this.styleObject.left = '0px';
            },
            //  显示
            sidebarbtnshow: function () {
                this.sidebarshow = true;
                this.sidebarhide = false;
                this.sidebarwidth.width = '183px';
                this.styleObject.left = '184px';
            },
            //  退出
            handleCommand() {
                var username = localStorage.getItem('ms_username');
                this.$message({ message: username +"已退出", type: 'success' });
                var rem = localStorage.getItem('ms_remember');
                if(rem == 'false'){
                    localStorage.removeItem('ms_username');
                    localStorage.removeItem('ms_usertime');
                    localStorage.removeItem('ms_remember');
                }
                this.$router.push('/userlogin');
            },

        },
        //默认加载
        beforeMount(){
            let usernames = localStorage.getItem('ms_username');
            if(usernames == undefined || usernames == null || usernames == ''){
                this.handleCommand();
            }else{
                this.username = usernames;
            }
          // //  let username = localStorage.getItem('ms_username');
          //   let username = '张三';
          //   if(username == undefined){
          //       this.$router.push('/operatorLogin');
          //   };
        }
    }
</script>

<style>
    .sidebarbtn{
            position: fixed;
            z-index:-9999;
            top:45%;
            width:19px;
            transition: width .8s;
            overflow:hidden;
            /*background-color: rgba(235, 235, 235, 0.55);*/
            transition: all .3s;
    }
    .sidebarbtn i{
        transition: all .3s;
        font-size: 37px;
        width: 15px;
        height: 30px;
        line-height: 30px;
        color: #fcfcfc;
        font-weight: bold;
        font-family: "Arial Black", Gadget, sans-serif;
        text-shadow: rgb(212, 212, 212) 0px 1px 1px, rgb(123, 153, 162) 0px 1px 1px, rgba(151, 207, 208, 0.298039) 0px -1px 1px;
        margin-left: -13px;
        background: #fff;
    }
    .sidebarbtnhide {left:182px; }
    .sidebarbtnshow {left:58px;}

</style>
